<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>[DEMO] jquery.render.js</title>
<script type="text/javascript" src="../../jquery-1.5.js"></script>
<script type="text/javascript" src="../jquery.render.custom.js"></script>
<style type="text/css">
#test01 {
	border-collapse: collapse;
}

#test01 th,#test01 td {
	border: 1px solid #ccc;
	padding: 3px;
	text-align: center;
}

#test01 th {
	background-color: #eee;
}
#test01-ext {
	border-collapse: collapse;
}

#test01-ext th,#test01-ext td {
	border: 1px solid #ccc;
	padding: 3px;
	text-align: center;
}

#test01-ext th {
	background-color: #eee;
}
</style>
</head>
<body>

<h1>レンダー</h1>

<div class="_je_ajaxcroud_private">
	<div class="template">
		<table id="test01-ext">
			<caption>Internet Explorer's Birthday</caption>
			<thead>
				<tr>
					<th>Version</th>
					<th>Birthday</th>
					<th>Unsupported</th>
				</tr>
			</thead>
			<tbody class="partial">
				<tr>
					<td>{{version}}</td>
					<td>{{birthDay}}</td>
					<td>{{unsupported}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>


<script type="text/javascript">
$(function() {
	render();
});
</script>
<script type="text/javascript">
var data01 = [ {
	version : "8",
	birthDay : "2009/3/20",
	unsupported : "-"
}, {
	version : "7",
	birthDay : "2006/11/2",
	unsupported : "-"
}, {
	version : "6",
	birthDay : "2001/8/27",
	unsupported : "2014/4/8"
}, {
	version : "5.5",
	birthDay : "2000/7/13",
	unsupported : "2005/12/31"
}, {
	version : "5",
	birthDay : "1999/3/18",
	unsupported : "2010/7/13"
} ];
var render = function() {
	view = $('*:[class^=_je_]:not(form:[class^=_je_])');
	for (i = 0; i < view.length; i++) {
		template = $('.partial', $('.template', view.eq(i)));
		result = template.render(data01);
		template.children().remove();
		if (result.length) {
			template.append(result);
		}
	}
}
</script>

</body>
</html>